import { useRef } from 'react'
import { Layer, Rect, Stage } from 'react-konva'

const MyRect = () => {
  const rect = useRef(null)

  const changeSize = () => {
    rect.current.to({
      scaleX: Math.random() + 0.8,
      scaleY: Math.random() + 0.8,
      duration: 0.2
    })
  }

  return (
    <Rect ref={rect} width={50} height={50} fill='green' draggable onDragEnd={changeSize} onDragStart={changeSize} />
  )
}

export default function View() {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <MyRect />
      </Layer>
    </Stage>
  )
}
